<script setup>
import { ref, watchEffect } from "vue";
import * as echarts from "echarts";

const props = defineProps(["data", "xData"]);
const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);

  const option = {
    grid: {
      width: "74%",
      height: "80%",
      left: 48,
      top: 5,
    },
    xAxis: {
      type: "value",

      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        textStyle: { color: "rgba(201, 233, 248, 0.60)", fontSize: 10 },
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: "#3D4985",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: "#3D4985",
        },
      },
    },
    yAxis: [
      {
        type: "category",
        data: props.xData,
        inverse:true,
        axisTick: { show: false },
        axisLabel: {
          show: true,
          interval: 0,
          textStyle: { color: "rgba(201, 233, 248, 0.60)", fontSize: 10 },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3D4985",
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        type: "bar",
        data: props.data,
        barWidth: 10,
        itemStyle: {
          color: {
            x: 1,
            y: 0,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "rgba(45, 128, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(45, 128, 255, 0.10)",
              },
            ],
          },
          borderRadius: 0,
        },
      },
    ],
  };

  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
